<%@page import="jp.co.hcs.attendancemanagement.AMResourceKeyConstants"%>
<%@page import="jp.co.hcs.attendancemanagement.AMResourceManager"%>
<%
String startEndLabel = AMResourceManager.getMessage(AMResourceKeyConstants.FIELD_STARTENDRESTTIME);
String startLabel = AMResourceManager.getMessage(AMResourceKeyConstants.FIELD_STARTRESTTIME);
String endLabel = AMResourceManager.getMessage(AMResourceKeyConstants.FIELD_ENDRESTTIME);
String restTime = AMResourceManager.getMessage(AMResourceKeyConstants.FIELD_RESTTIME);
%>

<script type="text/javascript">
	// init url = "restdetail.do?mode=load";
	// save url = "restdetail.do?mode=save";
	var trActived;
	var totalRestTimeFromScreen;
	$(document).ready(function(){
		$( "#rest-detail-popup" ).dialog({
			autoOpen: false,
			height: 533,
			width: 470,
			resizable:false,
			modal: true,
			close: function() {
			}
		});
    });
	
	function subTime(field1,field2){
		var x = "";
		var y = "";
		var minus = 0;
		var cellHours = 0;
 	    var cellMinutes = 0;
		if(field1.length>0){
			x=field1;
		}
		if(field2.length>0){
			y=field2;
		}
		if(!(x == "") && !(y == "")){
			cellHours = parseFloat(y.substring(0,2)) - parseFloat(x.substring(0,2));
    		cellMinutes = parseFloat(y.substring(3,6)) - parseFloat(x.substring(3,6));
		}
		
		if (cellMinutes < 0) {
			cellHours--;
		  	cellMinutes = cellMinutes + 60;
		}
	  	
		var roundingTime = 15;
		cellMinutes = Math.floor(cellMinutes / roundingTime) * roundingTime + (cellMinutes % roundingTime > 0 ? roundingTime : 0);
		if (cellMinutes == 60) {
			cellHours = cellHours + 1;
			cellMinutes = 0;
		}
		
	  	cellHours = (cellHours < 10) ? ("0"+cellHours) : cellHours;
	   	cellMinutes = (cellMinutes < 10) ? ("0"+cellMinutes) : cellMinutes;
	   	minus = cellHours + ":" + cellMinutes;
		return minus;
	}
	
	function checkInputTimeMsg(field, errorMsg){
		$(field).val(chkCode($(field).val()));
    	var x = $(field).val();
    	var isValid = true;
    	if(x.length == 0){
    		trActived = $(field).parent().parent();
    		$(trActived).find('input[name*="restTime"]').val("");
			$(trActived).find('label[id="restTime"]').text("");
			setTotalRestTime();
    		return false;
    	}
    	
    	if(x.length < 5 || !isNumeric(x.substring(0,2)) || x.substring(0,2) < 0 || x.substring(0,2) > 23
    			|| x.substring(2,3) != ":" || !isNumeric(x.substring(3,6)) || x.substring(3,6) < 0 || x.substring(3,6) > 59) {
    		isValid = false;
    	}
    	
    	if(!isValid){
    		alert("<bean:message key='Alarm.W1053.error' arg0='" + errorMsg + "'/>");
    		$(field).val("");
    		$(field).focus();
    	}	
    	
    	return isValid;
    }
    
    function isNumeric(n)
    {
        var n2 = n;
        n = parseFloat(n);
        return (n!='NaN' && n2==n);
    }
    
    function validateStartEndTime(startTimeField, endTimeField) {
    	if (checkInputTimeMsg(startTimeField, "<%=startLabel %>") && checkInputTimeMsg(endTimeField, "<%=endLabel %>")) {
    		if (isBefore(startTimeField, endTimeField)) {
    			return true;
    		}
    		else {
    			alert("<bean:message key='Alarm.W1053.error' arg0='<%=startEndLabel%>'/>");
    			$(endTimeField).val("");
        		$(endTimeField).focus();
    		}
    	}
    	return false;
    }
    
    function isBefore(startTimeField, endTimeField) {
    	var x = $(startTimeField).val();
		var y = $(endTimeField).val();
		var hour1 = parseFloat(x.substring(0,2));
		var hour2 = parseFloat(y.substring(0,2));
		var minute1 = parseFloat(x.substring(3,6));
		var minute2 = parseFloat(y.substring(3,6));
		
		if (hour1 < hour2) {
			return true;
		}
		else if (hour1 > hour2) {
			return false;
		}
		else {
			if (minute1 <= minute2) {
				return true;
			}
			else {
				return false;
			}
		}
    }
    
	function openRestDetailPopup() {
		totalRestTimeFromScreen = $('#screenRestTime').val();
		var year = $('#txtYear').val();
		var month = $('#txtMonth').val();
		var day = $('#txtDay').val();
    	$( "#rest-detail-popup" ).dialog( "open" );
    	$.getJSON("restdetail.do?mode=load&datechange=" + $('#dateChanged').val() + "&year=" + year + "&month=" + month + "&day=" + day + "&guid=" + generateGuid(),
   			function(data){
    			$('#dateChanged').val("false");
    		    var restDetailList = $("table[id='restDetailList']");
    		    $(restDetailList).find("tr[id='rowHead']").nextAll().remove();
   				$.each(data.listRestDetails, function(i,restDetailObj){
   				  $(restDetailList).append(
   				    "<tr>" +
		    		"<td width='30px' class='tdRestPopupTable' >" + restDetailObj.takingRestNum + "</td>" +
				    "<td width='50px' class='tdRestPopupTable'><input name='restStartTime' type='text' style='width:60px;text-align:center;' class='restTimeInput' value='" + restDetailObj.restStartTime + "'></td>" +
				    "<td width='50px' class='tdRestPopupTable'><input name='restEndTime' type='text' style='width:60px;text-align:center;' class='restTimeInput' value='" + restDetailObj.restEndTime + "'></td>" + 
				    "<td width='50px' class='tdRestPopupTable'><label id='restTime' style='text-align:center;width:60px;' class='restTimeItem'>" + restDetailObj.restTime + "</label><input type='hidden' name='restTime' value='" + restDetailObj.restTime + "'/></td>" +
				    "<td class='tdRestPopupTable'><input name='comment' type='text' style='width:230px;' value='" + restDetailObj.comment + "'></td>" +
				    "</tr>"
   				  );
   				  if (i == data.listRestDetails.length-1) {
	   				  $('.restTimeInput').focusout(function() {
	   					trActived = $(this).parent().parent();
	   					var startTime = $(trActived).find('input[name*="restStartTime"]');
	   					var endTime = $(trActived).find('input[name*="restEndTime"]');
	   					if(validateStartEndTime(startTime, endTime)){
	   						var restTime = subTime(startTime.val(), endTime.val());
	   						$(trActived).find('input[name*="restTime"]').val(restTime);
	   						$(trActived).find('label[id="restTime"]').text(restTime);
	   						setTotalRestTime();
	   		    		}
	   				  });
	   				  setTotalRestTime();
   				  }
   				});
   			});
    }
	
	function setTotalRestTime() {
		var totalRestTime = calculateTotalRestTime();
		$('input[name*="totalRestTime"]').val(totalRestTime);
		$('label[id="totalRestTime"]').text(totalRestTime);
	}
	
	function calculateTotalRestTime(){
    	var sum = 0;
    	var cellValueTemp ="";
    	var cellHours = 0;
 	    var cellMinutes = 0;
 	    
		$('.restTimeItem').each(function(){
			cellValueTemp = $(this).text();
			if(!(cellValueTemp == "")){
	    		cellHours = cellHours + parseFloat(cellValueTemp.substring(0,2));
	    		cellMinutes = cellMinutes + parseFloat(cellValueTemp.substring(3,6));
	    	}
		});
		
		cellHours = cellHours + parseInt(cellMinutes/60);
	  	cellMinutes = cellMinutes % 60;
	   	cellHours = (cellHours < 10) ? ("0"+cellHours) : cellHours;
	   	cellMinutes = (cellMinutes < 10) ? ("0"+cellMinutes) : cellMinutes;
	   	sum = cellHours + ":" + cellMinutes;
		return sum;
    }
	
	function updateRestDetailPopup(){
		var totalRestTime = $('input[name*="totalRestTime"]').val();
		
		$.post("restdetail.do?mode=save", $("#restDetailForm").serialize(), function(result) {
			if (result == "success") {
				$('#screenRestTime').val(totalRestTime);
				$('#btnReCalculate').click();
			}
		});
		$( "#rest-detail-popup" ).dialog( "close" );
	}
	
</script>

<div id="rest-detail-popup" title="<bean:message key="popup.restdetail.title"/>" style="padding-left: 10px; padding-right: 20px;" >
<form id="restDetailForm" method="post" action="restdetail.do">
	<input type="hidden" name="mode" value="save"/>
	<input type="hidden" name="totalRestTime"/>
	<table id="restDetailList" class="restPopupTable" style="width:430px; height:125px; font-size:12px; margin-top: 20px;" border="1" cellspacing="0" cellpadding="0">
		<tr id="rowHead">
		    <th style="width: 30px;height:40px;">No</th>
		    <th style="width: 60px;"><bean:message key="popup.restdetail.col.startTime"/></th>
		    <th style="width: 60px;"><bean:message key="popup.restdetail.col.endTime"/></th>
		    <th style="width: 60px;"><bean:message key="popup.restdetail.col.restTime"/></th>
		    <th ><bean:message key="popup.restdetail.col.comment"/></th>
		</tr>
	</table>
	<table style="width:434px; font-size:12px;" cellspacing="0" cellpadding="0">
		<tr>
		    <td class="tdRemoveAllBoder" width="30px"  height="22px">&nbsp;</td>
		    <td class="tdRemoveAllBoder" width="60px">&nbsp;</td>
		    <td class="tdRemoveAllBoder" width="60px">&nbsp;</td>
		    <td class="tdRemoveAllBoder" width="45px">&nbsp;</td>
		    <td class="tdRemoveAllBoder" width="134px" align="center"><bean:message key="popup.restdetail.label.totalRestTime"/></td>
		    <td class="tdShowAllBorder" style="text-align: center;border-top: none;"><label id="totalRestTime">&nbsp;</label></td>
		</tr>
	</table>
	<input type="button" class="buttonRestTime" value="<bean:message key="popup.restdetail.btn.update"/>" onclick="updateRestDetailPopup();">
</form>
</div>